<template>
  <h3>响应式基础</h3><br>
  <div>
  <button @click="increment"> 数值+1 </button>
  {{count}}
  <br>
  <div>
    学生：{{ obj.student.name }} , 年龄：{{obj.student.age}}<br>
    
    老师：{{ obj.teacher.name }} , 年龄：{{obj.teacher.age}}
  </div>
  学生姓名：<input  v-model="studentName" :placeholder="obj.student.name">,老师姓名：<input v-model="teacherName" :placeholder="obj.teacher.name"><br>
  <button @click="setName( teacherName, studentName)">修改名称</button><button @click="incrementAge">修改年龄</button>
  <br>
  <button @click="fetchData()">调用接口</button>
  </div>
</template>
   
<script>
 import { ref } from 'vue'
 import axios from 'axios';
 export default {
  setup(){
    const count = ref(0)
    const obj = ref({
      student : {name:'张三',age: 18 },
      teacher: {name:'李四',age:40}
    })
    function increment(){
      count.value = count.value+2;
    }

    function setName(teacherName,studentName){
      console.log(teacherName+","+studentName)
      obj.value.student.name = studentName;
      obj.value.teacher.name = teacherName;
    }

    function incrementAge(){
      obj.value.student.age++;
      obj.value.teacher.age++;
    }

    const responseData = ref(null);
    const error = ref(null);

    // 发送请求的函数
    const fetchData = () => {
      // 发送 GET 请求
      axios.get('https://api.example.com/data')
        .then(response => {
          // 请求成功时的处理
          responseData.value = response.data;
        })
        .catch(err => {
          // 请求失败时的处理
          error.value = err.message;
        });
    };

    return {
      count,
      increment,
      setName,
      incrementAge,
      obj,
      teacherName:"",
      studentName:"",
      fetchData,
      responseData,
      error
    }
  }
 }
</script>